<template>
    <div :class="contentClass">
        <n-tag :color="customColor ? customColor : computedColor"> {{ level }} 等级 </n-tag>
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

defineOptions({ name: 'UserLevelTag' });
const props = defineProps<{
    /** 等级 */
    level: number | string;
    /** 自定义等级颜色 */
    customColor?: { color?: string; borderColor?: string; textColor?: string };
    /** 自定义样式 */
    contentClass?: string;
}>();

/** customColor 为空时根据等级自动变换颜色 */
let computedColor = computed(() => {
    /** 不同等级的样式不同 */
    switch (props.level) {
        case 0:
            return { color: '#35333c', textColor: '#e2e1e4' };
        case 1:
            return { color: '#7a7374', textColor: '#e2e1e4' };
        case 2:
            return { color: '#5d3f51', textColor: '#e2e1e4' };
        case 3:
            return { color: '#36282b', textColor: '#e2e1e4' };
        case 4:
            return { color: '#73575c', textColor: '#e2e1e4' };
        case 5:
            return { color: '#856d72', textColor: '#e2e1e4' };
        case 6:
            return { color: '#bc84a8', textColor: '#e2e1e4' };
        case 7:
            return { color: '#8b2671', textColor: '#d2d97a' };
        case 8:
            return { color: '#f9723d', textColor: '#fcd217' };
        case 9:
            return { color: '#5d3131', textColor: '#f8ebe6' };
    }
});
</script>
